<script setup lang="ts">
import { ref, reactive, watch } from "vue"

const emit = defineEmits<{
  (e: "update:modelValue", value: any): void
}>()

//#region 批分处理
const activities = [
  {
    content: "总监部",
    size: "large",
    type: "primary",
    props: "director"
  },
  {
    content: "监理相关责任部门",
    color: "#0bbd87",
    size: "large",
    props: "department"
  },
  {
    content: "主办工程师",
    size: "large",
    props: "sponsor"
  }
]
const activitiesObj = ref({
  director: "",
  department: "",
  sponsor: ""
})

watch(
  activitiesObj,
  () => {
    console.log("--activitiesObj--", activitiesObj.value)

    emit("update:modelValue", JSON.stringify(activitiesObj.value))
  },
  {
    deep: true
  }
)

//#endregion
</script>
<template>
  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :type="activity.type"
      :color="activity.color"
      :size="activity.size"
      :hollow="activity.hollow"
    >
      <div>
        <div>选择{{ activity.content }}</div>
        <personnel v-model="activitiesObj[activity.props]"></personnel>
      </div>
    </el-timeline-item>
  </el-timeline>
</template>
<style scoped></style>
